<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>05元素样式/尺寸操作</title>
		<!-- 元素样式操作：针对css样式的属性和属性值 
		    css()    功能：添加任何样式下的属性和属性值
			            1个参:获取匹配集合元素中第一个元素的css属性
						2个参:设置匹配集合元素中所有元素的属性和属性值
						n个参:多层设置匹配集合元素中所有元素的属性和属性值
						    语法糖：css({"属性":"属性值","属性":"属性值"})
			height()和width()    功能：匹配集合元素中第一个元素的高度或宽度值
			                        无参：获取匹配集合元素中第一个元素的高度或宽度值
									有参：设置匹配集合元素中第一个元素的高度或宽度值
			outerHeight()和outerWidth()
			            功能：元素的宽高度
						    无参：获取元素的宽高度但是包含内边距+边框
							有参：只允许传bool值，true外加一个外边距
		-->
		<script src="../js/jquery-1.11.1.js"></script>
	<style>
		.box{
			border: 5px solid red;
			padding: 20px;
			margin: 20px;
			background-color: #98e4e4;
		}
		#result{
			margin-top: 10px;
			font-weight: 700;
		}
	</style>
	</head>
	<body>
		<!--box添加样式属性：背景色，内外边距：20px 边框5px
		    result添加样式属性：上外边距10px 字体加粗
		-->
		<!-- 显示效果区域 -->
		<div class="box" id="targetBox"></div>
		<button id="getColorBtn">获取背景颜色</button>
		<button id="setColorBtn">设置背景颜色</button>
		<button id="setBtn">设置多层效果</button>
		<button id="getWidthBtn">获取元素宽度</button>
		<button id="gbpBtn">获取元素高度【包含内边距+边框】</button>
		<button id="gpbBtn">获取元素高度【包含内边距+边框+外边距】</button>
		<!-- 显示效果提示区域 -->
		<div id="result" class="result"></div>
		<script>
			// 1点击获取背景颜色按钮 获取背景颜色值
			$("#getColorBtn").click(function(){
				//jq css("属性名")  获取属性值
				var bgColor=$(".box").css("background-color");
				//显示区域--提示：获取颜色属性值是？
				$("#result").text("获取背景颜色值是"+bgColor);
			});
			//2.点击设置背景颜色 按钮 设置背景颜色值
			$("#setColorBtn").click(function(){
				//.box添加颜色  橙色
				$(".box").css("background-color","orange");
				//#result 添加文本：效果修改为橙色
				$("#result").text("效果已经修改为橙色");
			});
			//3.点击设置多层效果按钮  设置背景色，倒角，盒子阴影
			$("#setBtn").click(function(){
				$(".box").css({"background-image":"url(../img/蜡笔小新 (192)_爱给网_aigei_com.png)",
						       "border-radius":"50%",
						       "box-shadow":"5px 5px 10px #b4f9ff",
						       "height":"100px",
						       "width":"100px",
						       "background-size":"100% 100%"
				});
			});	
			//4.点击获取元素宽度按钮 获取当前元素的宽高度
			$("#getWidthBtn").click(function(){
				var w=$(".box").width(300);
				$("#result").text("获取的宽度是"+w);
			});
			//5.点击获取元素高度【...】按钮  算高度
			$("#gbpBtn").click(function(){
				var gbp=$(".box").outerHeight();
				$("#result").text("高度为："+gbp+"px");
			});
			//6.点击获取元素高度【...】按钮   传参true
			$("#gpbBtn").click(function(){
				var gpb=$(".box").outerHeight(true);
				$("#result").text("实际元素的高度为："+gpb+"px");
			});
		</script>
	</body>
</html>